const boxes = document.querySelectorAll('.box');

window.addEventListener('scroll', checkBoxes);


function checkBoxes() {
    // 获取浏览器窗口的高度
    const triggerBottom = window.innerHeight / 5 * 4;

    boxes.forEach(box=>{
        // 获取当前box顶部与页面顶部距离
        // Element.getBoundingClientRect() 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
        const boxTop = box.getBoundingClientRect().top;
        if(boxTop<triggerBottom) {
            box.classList.add('show');
        }else {
            box.classList.remove('show');
        }
    })
}